Тема 6. Организация графического пользовательского интерфейса в операционных системах

План лекции

1. Ресурсы приложения

1.1. Типы ресурсов

Ресурсы — данные, встроенные в исполняемый файл.

1.2. Файл ресурсов (.rc)

// Иконка
IDI_APPICON ICON "app.ico"

// Курсор
IDC_MYCURSOR CURSOR "cursor.cur"

// Битмап
IDB_BACKGROUND BITMAP "bg.bmp"

// Строковая таблица
STRINGTABLE
BEGIN
    IDS_APP_TITLE       "Мое приложение"
    IDS_ERROR_MESSAGE   "Произошла ошибка"
END

// Версия
VS_VERSION_INFO VERSIONINFO
FILEVERSION 1,0,0,0
PRODUCTVERSION 1,0,0,0
BEGIN
    BLOCK "StringFileInfo"
    BEGIN
        VALUE "FileDescription", "Мое приложение"
        VALUE "FileVersion", "1.0.0.0"
    END
END

1.3. Использование ресурсов

// Загрузка иконки
HICON hIcon = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_APPICON));

// Загрузка курсора
HCURSOR hCursor = LoadCursor(hInstance, MAKEINTRESOURCE(IDC_MYCURSOR));

// Загрузка битмапа
HBITMAP hBitmap = LoadBitmap(hInstance, MAKEINTRESOURCE(IDB_BACKGROUND));

// Загрузка строки
WCHAR buffer[256];
LoadString(hInstance, IDS_APP_TITLE, buffer, 256);

2. Организация меню

2.1. Типы меню

Виды меню:

• Главное меню — строка в верхней части окна
• Контекстное меню — появляется по правому клику
• Системное меню — кнопка в заголовке окна

2.2. Создание меню

В файле ресурсов:

IDR_MAINMENU MENU
BEGIN
    POPUP "&Файл"
    BEGIN
        MENUITEM "&Создать\tCtrl+N", ID_FILE_NEW
        MENUITEM "&Открыть\tCtrl+O", ID_FILE_OPEN
        MENUITEM SEPARATOR
        MENUITEM "&Сохранить\tCtrl+S", ID_FILE_SAVE
        MENUITEM SEPARATOR
        MENUITEM "В&ыход", ID_FILE_EXIT
    END
    
    POPUP "&Правка"
    BEGIN
        MENUITEM "&Отменить\tCtrl+Z", ID_EDIT_UNDO
        MENUITEM "&Вырезать\tCtrl+X", ID_EDIT_CUT
        MENUITEM "&Копировать\tCtrl+C", ID_EDIT_COPY
        MENUITEM "В&ставить\tCtrl+V", ID_EDIT_PASTE
    END
END

2.3. Программное создание меню

// Создание меню
HMENU hMenu = CreateMenu();
HMENU hFileMenu = CreatePopupMenu();

// Добавление пунктов
AppendMenu(hFileMenu, MF_STRING, ID_FILE_NEW, L"&Создать");
AppendMenu(hFileMenu, MF_STRING, ID_FILE_OPEN, L"&Открыть");
AppendMenu(hFileMenu, MF_SEPARATOR, 0, NULL);
AppendMenu(hFileMenu, MF_STRING, ID_FILE_EXIT, L"В&ыход");

// Добавление подменю
AppendMenu(hMenu, MF_POPUP, (UINT_PTR)hFileMenu, L"&Файл");

// Установка меню окну
SetMenu(hWnd, hMenu);

2.4. Обработка команд меню

case WM_COMMAND:
    switch (LOWORD(wParam)) {
        case ID_FILE_NEW:
            // Создать новый файл
            break;
        case ID_FILE_OPEN:
            // Открыть файл
            break;
        case ID_FILE_SAVE:
            // Сохранить файл
            break;
        case ID_FILE_EXIT:
            PostQuitMessage(0);
            break;
    }
    break;

3. Диалоговые окна

3.1. Типы диалогов

Модальные диалоги:

• Блокируют родительское окно
• Требуют немедленного ответа
• Пример: MessageBox, Save Dialog

Немодальные диалоги:

• Не блокируют родительское окно
• Работают параллельно
• Пример: Find Dialog, Tool Window

3.2. Шаблон диалога

IDD_ABOUTBOX DIALOGEX 0, 0, 200, 100
STYLE DS_SETFONT | DS_MODALFRAME | WS_POPUP | WS_CAPTION | WS_SYSMENU
CAPTION "О программе"
FONT 8, "MS Shell Dlg"
BEGIN
    ICON            IDI_APPICON, IDC_STATIC, 10, 10, 20, 20
    LTEXT           "Мое приложение v1.0", IDC_STATIC, 40, 10, 150, 10
    LTEXT           "(c) 2025 Компания", IDC_STATIC, 40, 25, 150, 10
    DEFPUSHBUTTON   "OK", IDOK, 70, 70, 60, 15
END

3.3. Создание диалога

// Модальный диалог
INT_PTR result = DialogBox(
    hInstance,          // Экземпляр
    MAKEINTRESOURCE(IDD_ABOUTBOX),  // Шаблон
    hWndParent,         // Родитель
    AboutDlgProc        // Процедура диалога
);

// Немодальный диалог
HWND hDlg = CreateDialog(
    hInstance,
    MAKEINTRESOURCE(IDD_FIND),
    hWndParent,
    FindDlgProc
);

// Показать
ShowWindow(hDlg, SW_SHOW);

3.4. Процедура диалога

INT_PTR CALLBACK AboutDlgProc(
    HWND hDlg,
    UINT message,
    WPARAM wParam,
    LPARAM lParam
) {
    switch (message) {
        case WM_INITDIALOG:
            // Инициализация
            return TRUE;
            
        case WM_COMMAND:
            switch (LOWORD(wParam)) {
                case IDOK:
                case IDCANCEL:
                    EndDialog(hDlg, LOWORD(wParam));
                    return TRUE;
            }
            break;
    }
    return FALSE;  // Не обработано
}

4. Графическая подсистема Windows

4.1. Архитектура GDI

GDI (Graphics Device Interface) — интерфейс графических устройств.

4.2. Компоненты GDI

Основные элементы:

• Контекст устройства (DC) — поверхность рисования
• Перо (Pen) — линии и границы
• Кисть (Brush) — заливка
• Шрифт (Font) — текст
• Регион (Region) — области
• Битмап (Bitmap) — изображения

5. Контекст устройства

5.1. Понятие DC

Device Context — структура, описывающая поверхность рисования и инструменты.

Типы DC:

• Экранный — окно или весь экран
• Принтерный — страница принтера
• Памяти — битмап в памяти

// Получение DC окна
HDC hdc = GetDC(hWnd);

// Рисование...

// Освобождение
ReleaseDC(hWnd, hdc);

5.2. Обработка WM_PAINT

case WM_PAINT:
{
    PAINTSTRUCT ps;
    HDC hdc = BeginPaint(hWnd, &ps);
    
    // Рисование в hdc
    
    EndPaint(hWnd, &ps);
    return 0;
}

PAINTSTRUCT содержит:

• hdc — контекст устройства
• rcPaint — прямоугольник для перерисовки
• fErase — нужно ли стирать фон

6. Графические инструменты

6.1. Перо (Pen)

// Создание пера
HPEN hPen = CreatePen(
    PS_SOLID,      // Стиль: сплошная линия
    3,             // Ширина в пикселях
    RGB(255, 0, 0) // Цвет: красный
);

// Выбор в DC
HPEN hOldPen = (HPEN)SelectObject(hdc, hPen);

// Рисование
MoveToEx(hdc, 10, 10, NULL);
LineTo(hdc, 100, 100);

// Восстановление и удаление
SelectObject(hdc, hOldPen);
DeleteObject(hPen);

Стили пера:

• PS_SOLID — сплошная
• PS_DASH — штриховая
• PS_DOT — пунктирная
• PS_DASHDOT — штрих-пунктир

6.2. Кисть (Brush)

// Сплошная кисть
HBRUSH hBrush = CreateSolidBrush(RGB(0, 128, 255));

// Штриховая кисть
HBRUSH hHatchBrush = CreateHatchBrush(
    HS_DIAGCROSS,      // Стиль штриховки
    RGB(0, 0, 0)
);

// Системная кисть
HBRUSH hSysBrush = (HBRUSH)GetStockObject(GRAY_BRUSH);

// Использование
HBRUSH hOldBrush = (HBRUSH)SelectObject(hdc, hBrush);
Rectangle(hdc, 10, 10, 100, 100);
SelectObject(hdc, hOldBrush);
DeleteObject(hBrush);

6.3. Рисование фигур

// Прямоугольник
Rectangle(hdc, left, top, right, bottom);

// Эллипс
Ellipse(hdc, left, top, right, bottom);

// Скругленный прямоугольник
RoundRect(hdc, left, top, right, bottom, width, height);

// Многоугольник
POINT points[] = {{10, 10}, {50, 100}, {100, 50}};
Polygon(hdc, points, 3);

// Дуга
Arc(hdc, left, top, right, bottom, xStart, yStart, xEnd, yEnd);

6.4. Текст и шрифты

// Создание шрифта
HFONT hFont = CreateFont(
    24,              // Высота
    0,               // Ширина (0 = авто)
    0,               // Угол наклона
    0,               // Ориентация
    FW_BOLD,         // Жирность
    FALSE,           // Курсив
    FALSE,           // Подчеркивание
    FALSE,           // Зачеркивание
    DEFAULT_CHARSET, // Кодировка
    OUT_DEFAULT_PRECIS,
    CLIP_DEFAULT_PRECIS,
    DEFAULT_QUALITY,
    DEFAULT_PITCH | FF_SWISS,
    L"Arial"
);

// Установка и вывод
SelectObject(hdc, hFont);
TextOut(hdc, 10, 10, L"Привет, мир!", 12);

7. Обработка пользовательского ввода

7.1. Клавиатурный ввод

case WM_KEYDOWN:
    switch (wParam) {
        case VK_LEFT:
            // Стрелка влево
            break;
        case VK_RIGHT:
            // Стрелка вправо
            break;
        case VK_SPACE:
            // Пробел
            break;
    }
    break;

case WM_CHAR:
    // Символ с учетом раскладки
    wchar_t ch = (wchar_t)wParam;
    break;

7.2. Мышь

case WM_LBUTTONDOWN:
    // Левая кнопка нажата
    int x = GET_X_LPARAM(lParam);
    int y = GET_Y_LPARAM(lParam);
    break;

case WM_RBUTTONDOWN:
    // Правая кнопка
    break;

case WM_MOUSEMOVE:
    // Движение мыши
    break;

case WM_LBUTTONDBLCLK:
    // Двойной клик
    break;

8. Графический вывод

8.1. Двойная буферизация

Проблема мерцания:

// Создание совместимого DC
HDC hdcMem = CreateCompatibleDC(hdc);
HBITMAP hbmMem = CreateCompatibleBitmap(hdc, width, height);
HBITMAP hbmOld = (HBITMAP)SelectObject(hdcMem, hbmMem);

// Рисование в памяти
FillRect(hdcMem, &rect, hBrush);
// ... другие операции

// Копирование на экран
BitBlt(hdc, 0, 0, width, height, hdcMem, 0, 0, SRCCOPY);

// Очистка
SelectObject(hdcMem, hbmOld);
DeleteObject(hbmMem);
DeleteDC(hdcMem);

8.2. Работа с битмапами

// Загрузка из файла
HBITMAP hBitmap = (HBITMAP)LoadImage(
    NULL,
    L"image.bmp",
    IMAGE_BITMAP,
    0, 0,
    LR_LOADFROMFILE
);

// Создание совместимого DC
HDC hdcMem = CreateCompatibleDC(hdc);
HBITMAP hOld = (HBITMAP)SelectObject(hdcMem, hBitmap);

// Вывод
BitBlt(hdc, x, y, width, height, hdcMem, 0, 0, SRCCOPY);

// Растяжение
StretchBlt(hdc, x, y, newWidth, newHeight,
           hdcMem, 0, 0, srcWidth, srcHeight, SRCCOPY);

// Очистка
    SelectObject(hdcMem, hOld);
    DeleteDC(hdcMem);
    DeleteObject(hBitmap);

9. Графический вывод в Linux

9.1. Графические библиотеки Linux

Cairo — векторная графическая библиотека:

#include <cairo.h>
#include <cairo-xlib.h>
#include <X11/Xlib.h>

int main() {
    Display* dpy = XOpenDisplay(NULL);
    int screen = DefaultScreen(dpy);
    Window win = XCreateSimpleWindow(dpy, RootWindow(dpy, screen),
                                      10, 10, 400, 300, 0,
                                      BlackPixel(dpy, screen),
                                      WhitePixel(dpy, screen));
    XMapWindow(dpy, win);
    
    // Создание Cairo surface
    cairo_surface_t* surface = cairo_xlib_surface_create(
        dpy, win, DefaultVisual(dpy, screen), 400, 300);
    cairo_t* cr = cairo_create(surface);

    // Рисование
    cairo_set_source_rgb(cr, 1.0, 0.0, 0.0);  // Красный
    cairo_rectangle(cr, 50, 50, 100, 80);
    cairo_fill(cr);
    
    // Текст
    cairo_set_source_rgb(cr, 0.0, 0.0, 0.0);
    cairo_move_to(cr, 50, 200);
    cairo_show_text(cr, "Hello, Cairo!");
    
    cairo_destroy(cr);
    cairo_surface_destroy(surface);
    XCloseDisplay(dpy);
    return 0;
}

Компиляция:

gcc -o cairo_demo main.c `pkg-config --cflags --libs cairo x11`

9.2. GTK Drawing Area

#include <gtk/gtk.h>

static void draw_callback(GtkDrawingArea* area, cairo_t* cr,
                          int width, int height, gpointer data) {
    // Фон
    cairo_set_source_rgb(cr, 1.0, 1.0, 1.0);
    cairo_paint(cr);
    
    // Красный прямоугольник
    cairo_set_source_rgb(cr, 1.0, 0.0, 0.0);
    cairo_rectangle(cr, 50, 50, 100, 80);
    cairo_fill(cr);
    
    // Синий круг
    cairo_set_source_rgb(cr, 0.0, 0.0, 1.0);
    cairo_arc(cr, 250, 150, 50, 0, 2 * M_PI);
    cairo_fill(cr);
    
    // Линия
    cairo_set_source_rgb(cr, 0.0, 1.0, 0.0);
    cairo_set_line_width(cr, 3.0);
    cairo_move_to(cr, 0, 0);
    cairo_line_to(cr, width, height);
    cairo_stroke(cr);
}

static void on_activate(GtkApplication* app) {
    GtkWindow* window = GTK_WINDOW(gtk_application_window_new(app));
    gtk_window_set_title(window, "GTK Drawing");
    gtk_window_set_default_size(window, 400, 300);
    
    GtkDrawingArea* area = GTK_DRAWING_AREA(gtk_drawing_area_new());
    gtk_drawing_area_set_draw_func(area, draw_callback, NULL, NULL);
    gtk_window_set_child(window, GTK_WIDGET(area));
    
    gtk_window_present(window);
}

int main(int argc, char** argv) {
    GtkApplication* app = gtk_application_new("org.example.Draw",
                                               G_APPLICATION_DEFAULT_FLAGS);
    g_signal_connect(app, "activate", G_CALLBACK(on_activate), NULL);
    return g_application_run(G_APPLICATION(app), argc, argv);
}

9.3. QPainter (Qt)

#include <QApplication>
#include <QWidget>
#include <QPainter>

class DrawingWidget : public QWidget {
protected:
    void paintEvent(QPaintEvent*) override {
        QPainter painter(this);
        
        // Фон
        painter.fillRect(rect(), Qt::white);
        
        // Красный прямоугольник
        painter.setBrush(Qt::red);
        painter.drawRect(50, 50, 100, 80);
        
        // Синий эллипс
        painter.setBrush(Qt::blue);
        painter.drawEllipse(200, 100, 100, 100);

        // Текст
        painter.setPen(Qt::black);
        painter.setFont(QFont("Arial", 14));
        painter.drawText(50, 200, "Hello, Qt!");
        
        // Линия
        painter.setPen(QPen(Qt::green, 3));
        painter.drawLine(0, 0, width(), height());
    }
};

int main(int argc, char** argv) {
    QApplication app(argc, argv);
    DrawingWidget widget;
    widget.setWindowTitle("Qt Drawing");
    widget.resize(400, 300);
    widget.show();
    return app.exec();
}

10. Кроссплатформенные решения

10.1. Абстракция платформы

10.2. SDL (Simple DirectMedia Layer)

SDL — кроссплатформенная библиотека для мультимедиа.

#include <SDL2/SDL.h>
#include <SDL2/SDL_render.h>

int main(int argc, char** argv) {
    SDL_Init(SDL_INIT_VIDEO);
    
    SDL_Window* window = SDL_CreateWindow(
        "SDL Demo",
        SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED,
        800, 600,
        SDL_WINDOW_SHOWN
    );
    
    SDL_Renderer* renderer = SDL_CreateRenderer(
        window, -1, SDL_RENDERER_ACCELERATED
    );
    
    SDL_bool running = SDL_TRUE;
    while (running) {
        SDL_Event event;
        while (SDL_PollEvent(&event)) {
            if (event.type == SDL_QUIT)
                running = SDL_FALSE;
        }

        // Очистка
        SDL_SetRenderDrawColor(renderer, 255, 255, 255, 255);
        SDL_RenderClear(renderer);
        
        // Красный прямоугольник
        SDL_SetRenderDrawColor(renderer, 255, 0, 0, 255);
        SDL_Rect rect = {100, 100, 200, 150};
        SDL_RenderFillRect(renderer, &rect);
        
        SDL_RenderPresent(renderer);
    }
    
    SDL_DestroyRenderer(renderer);
    SDL_DestroyWindow(window);
    SDL_Quit();
    return 0;
}

10.3. Сравнение подходов к GUI

10.4. Выбор технологии

Рекомендации:

11. Низкоуровневые графические API

11.1. DirectX

DirectX — набор API от Microsoft для работы с мультимедиа и графикой, доступен только на Windows и Xbox.

История:

11.2. Vulkan

Vulkan — кроссплатформенный низкоуровневый API для графики и вычислений, разработан Khronos Group (создателями OpenGL).

Ключевые особенности:

• Кроссплатформенный: Windows, Linux, Android
• Явный контроль GPU (аналог DirectX 12)
• Низкие накладные расходы (low overhead)
• Многопоточная генерация команд
• SPIR-V — бинарный формат шейдеров (предварительная компиляция)
• Единый API для графики и вычислений (compute)

Архитектура Vulkan:

SPIR-V — стандартный промежуточный формат шейтеров:

• Бинарное представление, не текстовое (как GLSL/HLSL)
• Предварительная компиляция оффлайн
• Поддерживается Vulkan, OpenGL 4.6, OpenCL
• Инструменты: glslangValidator, SPIRV-Cross

MoltenVK — реализация Vulkan поверх Metal для macOS/iOS, позволяющая запускать Vulkan-приложения на платформах Apple.

11.3. Metal

Metal — графический API от Apple для macOS, iOS, tvOS.

Особенности:

• Нативный API для платформ Apple
• Явный контроль над GPU (аналог Vulkan/DirectX 12)
• Интеграция с Swift и Objective-C
• Metal Performance Shaders — библиотека оптимизированных шейдеров
• Metal Compute — GPGPU вычисления
• Недоступен за пределами экосистемы Apple

11.4. Сравнение графических API

11.5. Когда что использовать

Резюме

Ключевые моменты лекции:

Вопросы для самопроверки

1. Какие типы ресурсов существуют?
2. Чем отличается модальный диалог от немодального?
3. Что такое контекст устройства?
4. Какие инструменты GDI используются для рисования?
5. Как работает двойная буферизация?
6. Как обрабатывать ввод с мыши?
7. Что такое Cairo и как его использовать?
8. Какие кроссплатформенные GUI-решения существуют?

Практические задания

Самостоятельная работа (8 часов):

1. Создать приложение с меню и диалогом в WinAPI
2. Реализовать рисование с помощью GDI
3. Написать Cairo-приложение для Linux
4. Создать простое SDL-приложение

Рекомендуемая литература

Основная:

1. Таненбаум, Э. Современные операционные системы. — 4-е изд. — СПб.: Питер, 2021.
2. Kerrisk, M. The Linux Programming Interface. — No Starch Press, 2010.

Дополнительная:

3. MSDN: GDI, Device Contexts, Resources
4. Cairo Documentation: https://www.cairographics.org/documentation/
5. SDL Documentation: https://wiki.libsdl.org/
6. Qt Documentation: https://doc.qt.io/
7. GTK Documentation: https://docs.gtk.org/